<template>
	<view class="swiperContent">
		<swiper @change="change" @animationfinish="animationfinish" :indicator-dots="indicatorDots"
			:indicator-active-color="indicatorActiveColor" :indicator-color="indicatorColor"
			:autoplay="(autoplay && flag)" :current="current" :interval="interval" :duration="duration"
			:circular="circular" :vertical="vertical" :previous-margin="previousMargin" :next-margin="nextMargin"
			:display-multiple-items="displayMultipleItems" :skip-hidden-item-layout="skipHiddenItemLayout"
			:style="{'height':swiperHeight+'px'}"
			:class="(swiperType && displayMultipleItems ==1 && !vertical && !fullScreen)?'cardSwiper':'' "
			class="screen-swiper">
			<swiper-item class="swiper-item" v-for="(item,index) in swiperList" :key="index"
				:class="(cardCur==index && displayMultipleItems ==1 && !vertical &&  !fullScreen)?'cur':''"
				@tap="clickItem(index)">
				<!-- <view v-if="item[imageKey] && !item[videoKey]">
					<image :src="item[imageKey]"  :style="{'height':swiperHeight+'px'}"></image>
				    <text v-if="textTip" class="swiperText" :style="{
						'bottom':(swiperType?(textStyleBottom+12):textStyleBottom)+'%',
						'right':textStyleRight+'%',
						'color':textStyleColor,
						'background':textStyleBgcolor,
						'font-size':textStyleSize+'upx'
					}">{{item[textKey]}}</text>
				</view>
				<view v-if="item[videoKey]">
				<video :src="item[videoKey]" @play="play" @pause="pause" :style="{'height':swiperHeight+'px'}" autoplay loop muted :autoplay="videoAutoplay" objectFit="cover"></video>
				</view> -->

				<scroll-view scroll-y="true" class="pop-scroll">
					<view class="biaoqian-new">
						<view class="top">
							<image :src="item.user.pic | formatImgUrl" mode="" class="avatar"></image>
							<view class="display-flex">
								<text>{{item.user.username}}</text>
								<!-- <image
									:src="$options.filters.formatImgUrl(item.user.writer_level.is_active?item.user.writer_level.level.image:item.user.writer_level.level.hide_img)"
									@click="$go('/pages/user/grade?uid='+item.user.membe_id)" class="jipic" mode=""
									v-if="item.user&&item.user.is_writer">
								</image>
								<image
									:src="$options.filters.formatImgUrl(item.user.user_level.is_active?item.user.user_level.level.image:item.user.user_level.level.hide_img)"
									class="biepic" mode="" v-if="item.user.is_vip"></image> -->
							</view>
							<view>申请抢单</view>
						</view>
						<scroll-view scroll-y="true" class="tab">
							<view>
								&nbsp;&nbsp;
								{{item.u_title}}
							</view>
						</scroll-view>
						
						<view class="not_like" >
							<view class="tp">例文示例</view>
							<scroll-view class="bom" scroll-y="true" v-if="item.img_arr.length">
								<image v-for="(ite,idx) in item.img_arr" :src="ite  | formatImgUrl"  @click="$common.previewImage(ite,item.img_arr)" mode="aspectFill"></image>
							</scroll-view>
							<scroll-view class="bom" scroll-y="true" v-else>
								<image :src="'/images/up.png' | formatImgUrl"  mode="aspectFill"></image>
							</scroll-view>
						</view>
						
						
						<view class="cont_t" v-if="items.status!=0">
							<view class="t1" @click="qr_order(index)">
								<view class="tex">
									确认匹配
								</view>
							</view>
						</view>
					</view>
					
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: 'bw-swiper',
		created: function() {
			var that = this;
			if (this.fullScreen) {
				uni.getSystemInfo({
					success: function(e) {
						that.swiperHeight = e.screenHeight - 44
					}
				})
			}
		},
		mounted: function() {
			if (!this.fullScreen) {
				const query = uni.createSelectorQuery().in(this);
				query.select('.swiper-item').boundingClientRect(data => {
					this.swiperHeight = data.width / this.w_h;
				}).exec();
			}
			
			console.log(this.form);
			console.log(this.items.is_qiang,111);
		},
		props: {
			info: { // 信息
				type: Object,
				default: function() {
					return {}
				}
			},
			form: { // 
				type: Object,
				default: function() {
					return {}
				}
			},
			items: { // 当前用户
				type: Object,
				default: function() {
					return {}
				}
			},
			fullScreen: { // 是否全屏
				type: Boolean,
				default: false
			},
			swiperList: { // 滑块视图容器数据
				type: Array,
				default: function() {
					return []
				}
			},
			swiperType: { // false => 全屏限高轮播图 true => 卡塔式轮播图
				type: Boolean,
				default: false
			},
			videoAutoplay: { // true =>自动播放
				type: Boolean,
				default: false
			},
			videoKey: { // 视频映射的键
				type: String,
				default: 'src'
			},
			imageKey: { //  图片映射的键
				type: String,
				default: 'img'
			},
			textKey: { //   文字说明映射的键
				type: String,
				default: 'text'
			},
			textTip: { // 图片文字说明 false => 隐藏
				type: Boolean,
				default: false
			},
			textStyleSize: { // 图片文字大小
				type: Number,
				default: 24
			},
			textStyleBottom: { // 图片文字位置
				type: Number,
				default: 5
			},
			textStyleRight: { // 图片文字位置
				type: Number,
				default: 5
			},
			textStyleColor: { // 图片文字颜色
				type: String,
				default: '#ffffff'
			},
			textStyleBgcolor: { // 图片文字背景色
				type: String,
				default: 'transparent'
			},
			w_h: { //宽高比 推荐 w/h => 2
				type: Number,
				default: 2
			},
			skipHiddenItemLayout: { //是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 
				type: Boolean,
				default: true
			},
			displayMultipleItems: { //同时显示的滑块数量
				type: Number,
				default: 1
			},
			nextMargin: { // 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 头条小程序不支持
				type: String,
				default: '0px'
			},
			previousMargin: { //前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值头条小程序不支持
				type: String,
				default: '0px'
			},
			vertical: { //滑动方向是否为纵向 卡牌  不支持纵向以及同时显示的2块以上滑块数量
				type: Boolean,
				default: false
			},
			circular: { // 是否采用衔接滑动
				type: Boolean,
				default: true
			},
			duration: { // 滑动动画时长
				type: Number,
				default: 50
			},
			interval: { // 自动切换时间间隔
				type: Number,
				default: 2500
			},
			current: { // 当前所在滑块的 index
				type: Number,
				default: 0
			},
			autoplay: { // 是否自动切换
				type: Boolean,
				default: true
			},
			indicatorColor: { // 指示点颜色
				type: String,
				default: '#CCCCCC'
			},
			indicatorActiveColor: { // 当前选中的指示点颜色
				type: String,
				default: '#ffffff'
			},
			indicatorDots: { // 是否显示面板指示点
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				flag: true,
				cardCur: this.current,
				swiperHeight: 300
			}
		},
		computed: {

		},
		methods: {
			qr_order(index){
				this.$emit('qr_order',index)
			},
			// 删除图片
			deletePic(index) {
				this.form.img.splice(index, 1)
			},
			onChooseImg() {
				let auth = db.get('auth');
				console.log(auth, 777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				this.$common.chooseImage({}, (data) => {
					if (data) {
						this.form.img.push(data)
					}
				}, 9)
			},
			// 关闭弹窗
			closePop(){
				this.$emit('closePop')
			},
			play: function() {
				this.flag = false
			},
			pause: function() {
				this.flag = true
			},
			clickItem: function(index) {
				if (this.swiperList.length > 0) {
					this.$emit('clickItem', this.swiperList[index])
				}
			},
			change: function(e) {
				this.$emit('change', e)
			},
			animationfinish: function(e) {
				this.cardCur = e.detail.current;
				this.$emit('animationfinish', e)
			}
		}
	}
</script>

<style scoped lang="scss">
	.screen-swiper{
		height: 1130rpx!important;
	}
	.cardSwiper .swiper-item {
		// width: 86% !important;
		width: 100% !important;
		overflow: initial;
		// height: 1030rpx!important;
		
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 0 15rpx;
		box-sizing: border-box;
	}

	.cardSwiper .swiper-item view {
		// width: 100%;
		display: block;
		// height: 100%;
		border-radius: 10upx;
		// transform: scale(0.93, 0.8);
		// opacity: 0.7;
		// transition: all 0.01s ease-in 0s;
		// overflow: hidden;
		box-sizing: border-box;
		// margin-left: 8.1%;
	}

	.cardSwiper .cur view {
		// transform: initial;
		opacity: 1;
		// transition: all 0.1s ease-in 0s;
	}

	.swiper-item view {
		// height: 100%;
		width: 100%;
		position: relative;
	}

	.swiperText {
		position: absolute;
		color: #ffffff;
		z-index: 2;
		border-radius: 4upx;
		padding: 0 4upx;
	}

	.screen-swiper image {
		width: 100%;
	}

	.screen-swiper video,
	.swiper-item video {
		width: 100%;
		display: block;
		height: 100%;
	}

	.swiperContent {
		width: 100%!important;
	}

	.biaoqian-new {
		border-radius: 0.5em;
		background: #fff;
		// width: 600rpx;
		width: 100%;
		margin: 0 auto;
		/* #ifdef APP-PLUS */
		margin-top: 140rpx;
		/* #endif */
		/* #ifndef APP-PLUS */
		margin-top: 120rpx;
		/* #endif */
		height: 770rpx;

		.top {
			padding-top: 70rpx;
			font-size: 26rpx;
			color: #000;
			text-align: center;
			width: 90%;
			margin-left: 5%;
			
			.avatar {
				width: 110rpx;
				height: 110rpx;
				position: absolute;
				// left: 265rpx;
				left: 50%;
				transform: translateX(-50%);
				top: -35px;
				margin: 0 auto;
				border-radius: 20em;
			}
			
			.jipic {
				display: inline-block;
				width: 41px;
				height:19px;
				margin-left: 4px;
			}
			
			.biepic {
				display: inline-block;
				width: 41px;
				height:19px;
				margin-left: 4px;
			}

			view {
				&:first-child {
					font-weight: 700;
					font-size: 14px;
					color: #3D3D3D;
				}

				&:last-child {
					margin-top: 6px;
					font-size: 12px;
					color: #999;
				}
			}
		}

		.tab {
			padding-top: 10rpx;
			font-size: 21rpx;
			font-weight: 700;
			width: 90%;
			margin-left: 5%;
			float: left;
			text-align: center;
			height: 135px;
			background: rgba(153, 153, 153, 0.2);
			padding: 10px 10px;
			padding-bottom: 20px;
			box-sizing: border-box;
			border-radius: 0.5em;

			view {
				width: 88%;
				font-weight: 500;
				
				// margin-left: 16rpx;
				
				float: left;
				color: #999;
				text-align: left;
				// height: 100px;
			}

			.c1 {
				opacity: 1;
				font-family: Source Han Sans CN;
				font-size: 10px;
				font-weight: normal;
				line-height: normal;
				letter-spacing: 0em;

				color: #999999;
			}
		}

		.not_like {
			width: 86%;
			margin-left: 7%;
			border-radius: 0.5em;
			text-align: center;
			float: left;
			color: #999;
			font-size: 27rpx;
			margin-top: 40rpx;
			text-align: left;
			padding-bottom: 20px;
			background: rgba(216, 216, 216, 0.3);

			.tp {
				padding: 5px 10px;
				font-size: 12px;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			}
			
			.bom{
				padding-left: 15px;
				max-height: 135rpx;
			}

			image {
				margin-top: 10px;
				width: 53px;
				height: 53px;
				float: left;
				border-radius: 4px;
				margin-left: 5px;

				&:first-child {
					margin-left: 0px;
				}
			}
		}

		.line {
			margin-top: 30rpx;
			width: 88%;
			margin-left: 6%;
			float: left;
			height: 0px;
			opacity: 1;
			border: 1rpx solid rgba(153, 153, 153, 0.1);
		}

		.cont_t {
			border-radius: 8px;
			opacity: 1;
			background: #45C4B0;
			float: left;
			width: 80%;
			height: 86rpx;
			margin-left: 10%;
			margin-right: 10%;
			text-align: center;
			margin-top: 30rpx;
			color: #fff;
			line-height: 86rpx;

		}

		.cont_b {
			float: left;
			width: 100%;
			text-align: center;
			margin-top: 20rpx;
			background: rgba(69, 196, 176, 0.05);
			float: left;
			width: 92%;
			height: 86rpx;
			margin-left: 4%;
			color: #45C4B0;

			.t1 {
				width: 50%;
				margin: 0 auto;
				margin-top: 20rpx;

				image {
					width: 33rpx;
					;
					height: 33rpx;
					float: left;
				}

				.tex {
					float: left;
					margin-left: 10rpx;
				}
			}


		}
	}
	
	.cardSwiper .swiper-item.cur .biaoqian-new{
		height: 950rpx!important;
		/* #ifdef APP-PLUS */
		margin-top: 100rpx;
		/* #endif */
		/* #ifndef APP-PLUS */
		margin-top: 80rpx;
		/* #endif */
		border-radius: 0.5em;
	}

	.cl1 {
		height: 60rpx;
		width: 60rpx;
		position: relative;
		top: 110rpx;
	}

	.zhezhao {
		height: 100vh;
		position: fixed;
		top: 0rpx;
		right: 0px;
		width: 100%;
		z-index: 101;
		background: rgba(51, 51, 51, 0.6);
	}

	.zong {
		position: fixed;
		width: 100%;
		text-align: center;
		margin: 0 auto;
		// margin-left: 5%;
		top: 15%;
		z-index: 102;
	}
	
	.pop-scroll{
		// padding-top: 100rpx;
		height: 950rpx;
		border-radius: 0.5em;
		overflow: hidden;
	}
</style>